<template>
  <div class="footer_wrapper">
    <div class="footer_container v-flex-row-around">
      <div class="cell v-flex-column-center" :class="{selected_style: selected == 1}" @click="toHomePage">
        <img src="/static/image/tab_bar_home_selected@2x.png" v-show="selected == '1'">
        <img src="/static/image/tab_bar_home@2x.png" v-show="selected != '1'">
        <p class="tab_bar_text" >首页</p>
      </div>
      <div class="cell v-flex-column-center" :class="{selected_style: selected == 2}" @click="toTrainPage">
        <img src="/static/image/tab_bar_train_selected@2x.png" v-show="selected == '2'">
        <img src="/static/image/tab_bar_train@2x.png" v-show="selected != '2'">
        <p class="tab_bar_text">培训</p>
      </div>
      <div class="cell_play" @click="toHotRecommend">
        <img src="/static/image/tab_bar_play@2x.png">
      </div>
      <div class="cell v-flex-column-center" :class="{selected_style: selected == 3}" @click="toConsultPage">
        <img src="/static/image/tab_bar_consult@2x.png" v-show="selected == '3'">
        <img src="/static/image/tab_bar_consult@2x.png" v-show="selected != '3'">
        <p class="tab_bar_text">咨询</p>
      </div>
      <div class="cell v-flex-column-center" :class="{selected_style: selected == 4}" @click="toMyPage">
        <img src="/static/image/tab_bar_my_selected@2x.png" v-show="selected == '4'">
        <img src="/static/image/tab_bar_my@2x.png" v-show="selected != '4'">
        <p class="tab_bar_text">我的</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    selected: {
      type: String,
      default: '1'
    }
  },
  methods: {
    // 跳转到热门视频播放页面
    toHotRecommend () {
      wx.showModal({
        title: '提示',
        content: '是否跳转到视频播放页面？',
        success(res) {
          if (res.confirm) {
            console.log('用户点击确定')
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    },
    toHomePage () {
      this.$router.push({path: '/pages/index/index'})
    },
    toTrainPage () {
      this.$router.push({path: '/pages/train/train'})
    },
    toConsultPage () {
      this.$router.push({path: '/pages/consult/consult'})
    },
    toMyPage () {
      this.$router.push({path: '/pages/center/center'})
    }
  }
};
</script>
<style scoped lang="less">
.footer_wrapper {
  height: 80rpx;
  background-color: @bg_color;
  box-shadow: 0px 3px 9px 1px rgba(80, 166, 255, 0.29);
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  .footer_container {
    height: 80rpx;
    position: relative;
    .cell_play {
      & > img {
      width: 106rpx;
      height: 106rpx;
      position: absolute;
      bottom: 25%;
      left: 50%;
      transform: translate(-50%,0%);
      }
    }
  }
}
  .cell > img {
    width: 36rpx;
    height: 36rpx;
  }
  .tab_bar_text {
    font-size: @font_size_20;
    color: @tab_bar_textColor;
  }
  .selected_style .tab_bar_text {
    color: @theme_color;
  }
</style>
